
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <link rel="stylesheet" href="iconfont.css">
</head>
<body>
    <div class="main markdown">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                <i class="icon iconfont icon-wei"></i>
                    <div class="name">微</div>
                    <div class="fontclass">.icon-wei</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yuyin3"></i>
                    <div class="name">语音</div>
                    <div class="fontclass">.icon-yuyin3</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-chahao"></i>
                    <div class="name">叉号</div>
                    <div class="fontclass">.icon-chahao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhuye"></i>
                    <div class="name">主页</div>
                    <div class="fontclass">.icon-zhuye</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shanchu"></i>
                    <div class="name">删除</div>
                    <div class="fontclass">.icon-shanchu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-lianxiwomen"></i>
                    <div class="name">联系我们</div>
                    <div class="fontclass">.icon-lianxiwomen</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shezhi"></i>
                    <div class="name">设置</div>
                    <div class="fontclass">.icon-shezhi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-star1"></i>
                    <div class="name">star</div>
                    <div class="fontclass">.icon-star1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shu2"></i>
                    <div class="name">书</div>
                    <div class="fontclass">.icon-shu2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dayin"></i>
                    <div class="name">打印</div>
                    <div class="fontclass">.icon-dayin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yuyin"></i>
                    <div class="name">语音</div>
                    <div class="fontclass">.icon-yuyin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-guanbi"></i>
                    <div class="name">关闭</div>
                    <div class="fontclass">.icon-guanbi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zixun"></i>
                    <div class="name">咨询</div>
                    <div class="fontclass">.icon-zixun</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon09"></i>
                    <div class="name">后退</div>
                    <div class="fontclass">.icon-icon09</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-llmenuwmnotice2"></i>
                    <div class="name">公告</div>
                    <div class="fontclass">.icon-llmenuwmnotice2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconfonterror2"></i>
                    <div class="name">关闭</div>
                    <div class="fontclass">.icon-iconfonterror2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconshezhi01"></i>
                    <div class="name">设置</div>
                    <div class="fontclass">.icon-iconshezhi01</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shijian"></i>
                    <div class="name">时间</div>
                    <div class="fontclass">.icon-shijian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-duihao"></i>
                    <div class="name">对号</div>
                    <div class="fontclass">.icon-duihao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tianjia"></i>
                    <div class="name">添加</div>
                    <div class="fontclass">.icon-tianjia</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-cnbilibilib"></i>
                    <div class="name">CN_bilibili B</div>
                    <div class="fontclass">.icon-cnbilibilib</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconfontzhuye"></i>
                    <div class="name">主页</div>
                    <div class="fontclass">.icon-iconfontzhuye</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconmingchengpaixu59"></i>
                    <div class="name">电话</div>
                    <div class="fontclass">.icon-iconmingchengpaixu59</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jinqian"></i>
                    <div class="name">金钱</div>
                    <div class="fontclass">.icon-jinqian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wode2"></i>
                    <div class="name">我的</div>
                    <div class="fontclass">.icon-wode2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-chahao1"></i>
                    <div class="name">叉号</div>
                    <div class="fontclass">.icon-chahao1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-bianji"></i>
                    <div class="name">编辑</div>
                    <div class="fontclass">.icon-bianji</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-cai1"></i>
                    <div class="name">踩</div>
                    <div class="fontclass">.icon-cai1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zan"></i>
                    <div class="name">赞</div>
                    <div class="fontclass">.icon-zan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-bangzhu"></i>
                    <div class="name">帮助</div>
                    <div class="fontclass">.icon-bangzhu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yuyin1"></i>
                    <div class="name">语音</div>
                    <div class="fontclass">.icon-yuyin1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-star"></i>
                    <div class="name">star</div>
                    <div class="fontclass">.icon-star</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-video"></i>
                    <div class="name">视频</div>
                    <div class="fontclass">.icon-video</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-pinglun"></i>
                    <div class="name">评论</div>
                    <div class="fontclass">.icon-pinglun</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-guanbi1"></i>
                    <div class="name">关闭</div>
                    <div class="fontclass">.icon-guanbi1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-halfstar"></i>
                    <div class="name">halfstar</div>
                    <div class="fontclass">.icon-halfstar</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zuanshi"></i>
                    <div class="name">钻石</div>
                    <div class="fontclass">.icon-zuanshi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xuanxiu"></i>
                    <div class="name">选修</div>
                    <div class="fontclass">.icon-xuanxiu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-bofang"></i>
                    <div class="name">播放</div>
                    <div class="fontclass">.icon-bofang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-cha"></i>
                    <div class="name">叉号</div>
                    <div class="fontclass">.icon-cha</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-duihaocuohao54"></i>
                    <div class="name">对号</div>
                    <div class="fontclass">.icon-duihaocuohao54</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shu1"></i>
                    <div class="name">书</div>
                    <div class="fontclass">.icon-shu1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-book"></i>
                    <div class="name">书</div>
                    <div class="fontclass">.icon-book</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconfontzanting"></i>
                    <div class="name">暂停</div>
                    <div class="fontclass">.icon-iconfontzanting</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiahao"></i>
                    <div class="name">加号</div>
                    <div class="fontclass">.icon-jiahao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jia"></i>
                    <div class="name">加</div>
                    <div class="fontclass">.icon-jia</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiameng"></i>
                    <div class="name">加盟</div>
                    <div class="fontclass">.icon-jiameng</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-feiyongshuoming"></i>
                    <div class="name">费用说明</div>
                    <div class="fontclass">.icon-feiyongshuoming</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wancheng"></i>
                    <div class="name">完成</div>
                    <div class="fontclass">.icon-wancheng</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-houtui"></i>
                    <div class="name">后退</div>
                    <div class="fontclass">.icon-houtui</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiangxia1"></i>
                    <div class="name">向下</div>
                    <div class="fontclass">.icon-xiangxia1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiaoliu1"></i>
                    <div class="name">交流</div>
                    <div class="fontclass">.icon-jiaoliu1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiaoliu"></i>
                    <div class="name">交流</div>
                    <div class="fontclass">.icon-jiaoliu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jinggao"></i>
                    <div class="name">警告</div>
                    <div class="fontclass">.icon-jinggao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shenpi2"></i>
                    <div class="name">审批</div>
                    <div class="fontclass">.icon-shenpi2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shenpi"></i>
                    <div class="name">审批</div>
                    <div class="fontclass">.icon-shenpi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shanxiyidongduankaoqinjiankongzhishikushouye03"></i>
                    <div class="name">学习</div>
                    <div class="fontclass">.icon-shanxiyidongduankaoqinjiankongzhishikushouye03</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiangbei"></i>
                    <div class="name">奖杯</div>
                    <div class="fontclass">.icon-jiangbei</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shipin"></i>
                    <div class="name">视频</div>
                    <div class="fontclass">.icon-shipin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wode1"></i>
                    <div class="name">我的</div>
                    <div class="fontclass">.icon-wode1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-x-mpg"></i>
                    <div class="name">视频</div>
                    <div class="fontclass">.icon-x-mpg</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-comiisyoujiantou"></i>
                    <div class="name">右箭头</div>
                    <div class="fontclass">.icon-comiisyoujiantou</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-list"></i>
                    <div class="name">list</div>
                    <div class="fontclass">.icon-list</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fenlei2"></i>
                    <div class="name">分类</div>
                    <div class="fontclass">.icon-fenlei2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-movierecorder1187902easyiconnet"></i>
                    <div class="name">视频</div>
                    <div class="fontclass">.icon-movierecorder1187902easyiconnet</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon2"></i>
                    <div class="name">添加</div>
                    <div class="fontclass">.icon-icon2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiala"></i>
                    <div class="name">下拉</div>
                    <div class="fontclass">.icon-xiala</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shipin1"></i>
                    <div class="name">视频</div>
                    <div class="fontclass">.icon-shipin1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-chuangjian-copy"></i>
                    <div class="name">创建</div>
                    <div class="fontclass">.icon-chuangjian-copy</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-minusj"></i>
                    <div class="name">减</div>
                    <div class="fontclass">.icon-minusj</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-2"></i>
                    <div class="name">讲座会</div>
                    <div class="fontclass">.icon-2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shengyin1"></i>
                    <div class="name">声音</div>
                    <div class="fontclass">.icon-shengyin1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dianhua"></i>
                    <div class="name">电话</div>
                    <div class="fontclass">.icon-dianhua</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-book-copy"></i>
                    <div class="name">书吧</div>
                    <div class="fontclass">.icon-book-copy</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wode"></i>
                    <div class="name">我的</div>
                    <div class="fontclass">.icon-wode</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-552cd14718c49"></i>
                    <div class="name">分类</div>
                    <div class="fontclass">.icon-552cd14718c49</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiangpaixian"></i>
                    <div class="name">奖牌_线</div>
                    <div class="fontclass">.icon-jiangpaixian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-chadan"></i>
                    <div class="name">查单</div>
                    <div class="fontclass">.icon-chadan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shipin2"></i>
                    <div class="name">视频</div>
                    <div class="fontclass">.icon-shipin2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jianpan"></i>
                    <div class="name">键盘</div>
                    <div class="fontclass">.icon-jianpan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-comment"></i>
                    <div class="name">评论</div>
                    <div class="fontclass">.icon-comment</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-hezuo"></i>
                    <div class="name">合作</div>
                    <div class="fontclass">.icon-hezuo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shengyin"></i>
                    <div class="name">声音</div>
                    <div class="fontclass">.icon-shengyin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shiyongbangzhu"></i>
                    <div class="name">使用帮助</div>
                    <div class="fontclass">.icon-shiyongbangzhu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weixuanzhong"></i>
                    <div class="name">未选中</div>
                    <div class="fontclass">.icon-weixuanzhong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-cf-c15"></i>
                    <div class="name">审批</div>
                    <div class="fontclass">.icon-cf-c15</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tongjibaobiao"></i>
                    <div class="name">统计报表</div>
                    <div class="fontclass">.icon-tongjibaobiao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xuexi"></i>
                    <div class="name">学习</div>
                    <div class="fontclass">.icon-xuexi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-kefu"></i>
                    <div class="name">客服</div>
                    <div class="fontclass">.icon-kefu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-chahaozhuanhuan"></i>
                    <div class="name">叉号 </div>
                    <div class="fontclass">.icon-chahaozhuanhuan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-kefu1"></i>
                    <div class="name">客服</div>
                    <div class="fontclass">.icon-kefu1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiangxia2"></i>
                    <div class="name">向下</div>
                    <div class="fontclass">.icon-xiangxia2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xuanzhong"></i>
                    <div class="name">选中</div>
                    <div class="fontclass">.icon-xuanzhong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yishenpi"></i>
                    <div class="name">已审批</div>
                    <div class="fontclass">.icon-yishenpi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dianzan"></i>
                    <div class="name">点赞</div>
                    <div class="fontclass">.icon-dianzan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-book1"></i>
                    <div class="name">书</div>
                    <div class="fontclass">.icon-book1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yiwancheng"></i>
                    <div class="name">已完成</div>
                    <div class="fontclass">.icon-yiwancheng</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-cop"></i>
                    <div class="name">企业</div>
                    <div class="fontclass">.icon-cop</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiaoxuekejian"></i>
                    <div class="name">教学课件</div>
                    <div class="fontclass">.icon-jiaoxuekejian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wodekecheng"></i>
                    <div class="name">我的课程</div>
                    <div class="fontclass">.icon-wodekecheng</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-duigou"></i>
                    <div class="name">对勾</div>
                    <div class="fontclass">.icon-duigou</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fankui"></i>
                    <div class="name">反馈</div>
                    <div class="fontclass">.icon-fankui</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-cai"></i>
                    <div class="name">踩</div>
                    <div class="fontclass">.icon-cai</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yiwancheng2"></i>
                    <div class="name">已完成</div>
                    <div class="fontclass">.icon-yiwancheng2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-notice"></i>
                    <div class="name">公告</div>
                    <div class="fontclass">.icon-notice</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-25chengji"></i>
                    <div class="name">25成绩</div>
                    <div class="fontclass">.icon-25chengji</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-duihao1"></i>
                    <div class="name">对号</div>
                    <div class="fontclass">.icon-duihao1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-qingjiayuanyin"></i>
                    <div class="name">请假原因</div>
                    <div class="fontclass">.icon-qingjiayuanyin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-laba"></i>
                    <div class="name">喇叭</div>
                    <div class="fontclass">.icon-laba</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-svgwrite"></i>
                    <div class="name">文章管理</div>
                    <div class="fontclass">.icon-svgwrite</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fenlei1"></i>
                    <div class="name">分类</div>
                    <div class="fontclass">.icon-fenlei1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shenhetongguo"></i>
                    <div class="name">审核通过</div>
                    <div class="fontclass">.icon-shenhetongguo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-webtubiaoku07"></i>
                    <div class="name">反馈</div>
                    <div class="fontclass">.icon-webtubiaoku07</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-1chengjifabu"></i>
                    <div class="name">1  成绩发布</div>
                    <div class="fontclass">.icon-1chengjifabu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shu3"></i>
                    <div class="name">书</div>
                    <div class="fontclass">.icon-shu3</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-paidantai"></i>
                    <div class="name">派单台</div>
                    <div class="fontclass">.icon-paidantai</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wenzi"></i>
                    <div class="name">文字</div>
                    <div class="fontclass">.icon-wenzi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dianzan1"></i>
                    <div class="name">dianzan</div>
                    <div class="fontclass">.icon-dianzan1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-kecheng"></i>
                    <div class="name">课程</div>
                    <div class="fontclass">.icon-kecheng</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-deng"></i>
                    <div class="name">灯</div>
                    <div class="fontclass">.icon-deng</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xuanze"></i>
                    <div class="name">选择</div>
                    <div class="fontclass">.icon-xuanze</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xuexi2"></i>
                    <div class="name">学习2</div>
                    <div class="fontclass">.icon-xuexi2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-edit"></i>
                    <div class="name">edit</div>
                    <div class="fontclass">.icon-edit</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fenlei"></i>
                    <div class="name">分类</div>
                    <div class="fontclass">.icon-fenlei</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-peiyin1"></i>
                    <div class="name">配音1</div>
                    <div class="fontclass">.icon-peiyin1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-chuangjian"></i>
                    <div class="name">创建</div>
                    <div class="fontclass">.icon-chuangjian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zmjiameng"></i>
                    <div class="name">zm-加盟</div>
                    <div class="fontclass">.icon-zmjiameng</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-renshu"></i>
                    <div class="name">人数</div>
                    <div class="fontclass">.icon-renshu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhidingfanwei"></i>
                    <div class="name">指定范围</div>
                    <div class="fontclass">.icon-zhidingfanwei</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xuanze1"></i>
                    <div class="name">选择</div>
                    <div class="fontclass">.icon-xuanze1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jianpan1"></i>
                    <div class="name">键盘</div>
                    <div class="fontclass">.icon-jianpan1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yuanquan"></i>
                    <div class="name">圆圈</div>
                    <div class="fontclass">.icon-yuanquan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-kaike"></i>
                    <div class="name">开课</div>
                    <div class="fontclass">.icon-kaike</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouye-shouye"></i>
                    <div class="name">首页-首页</div>
                    <div class="fontclass">.icon-shouye-shouye</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wenjuantiaocha"></i>
                    <div class="name">问卷调查</div>
                    <div class="fontclass">.icon-wenjuantiaocha</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-kecheng3"></i>
                    <div class="name">课程</div>
                    <div class="fontclass">.icon-kecheng3</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shijian1"></i>
                    <div class="name">时间</div>
                    <div class="fontclass">.icon-shijian1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-toupiao"></i>
                    <div class="name">投票</div>
                    <div class="fontclass">.icon-toupiao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiangxia"></i>
                    <div class="name">向下</div>
                    <div class="fontclass">.icon-xiangxia</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yuyin4"></i>
                    <div class="name">语音</div>
                    <div class="fontclass">.icon-yuyin4</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xuanze3"></i>
                    <div class="name">选择</div>
                    <div class="fontclass">.icon-xuanze3</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-sousuo-sousuo1"></i>
                    <div class="name">搜索-搜索</div>
                    <div class="fontclass">.icon-sousuo-sousuo1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wentifankui"></i>
                    <div class="name">问题反馈</div>
                    <div class="fontclass">.icon-wentifankui</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xuanze4"></i>
                    <div class="name">选择</div>
                    <div class="fontclass">.icon-xuanze4</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shenpi1"></i>
                    <div class="name">审批</div>
                    <div class="fontclass">.icon-shenpi1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-task"></i>
                    <div class="name">任务</div>
                    <div class="fontclass">.icon-task</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shu5"></i>
                    <div class="name">书</div>
                    <div class="fontclass">.icon-shu5</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tongji"></i>
                    <div class="name">统计</div>
                    <div class="fontclass">.icon-tongji</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-kecheng1"></i>
                    <div class="name">课程</div>
                    <div class="fontclass">.icon-kecheng1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-sousuo-sousuo"></i>
                    <div class="name">搜索-搜索</div>
                    <div class="fontclass">.icon-sousuo-sousuo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-duigou1"></i>
                    <div class="name">对勾</div>
                    <div class="fontclass">.icon-duigou1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shu"></i>
                    <div class="name">书</div>
                    <div class="fontclass">.icon-shu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shu4"></i>
                    <div class="name">书重叠</div>
                    <div class="fontclass">.icon-shu4</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-teach"></i>
                    <div class="name">讲课</div>
                    <div class="fontclass">.icon-teach</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-guanliyuan"></i>
                    <div class="name">管理员</div>
                    <div class="fontclass">.icon-guanliyuan</div>
                </li>
            
        </ul>

        <h2 id="font-class-">font-class引用</h2>
        <hr>

        <p>font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。</p>
        <p>与unicode使用方式相比，具有如下特点：</p>
        <ul>
        <li>兼容性良好，支持ie8+，及所有现代浏览器。</li>
        <li>相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。</li>
        <li>因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。</li>
        <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的fontclass代码：</h3>


        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;link rel="stylesheet" type="text/css" href="./iconfont.css"&gt;</span></code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
        <pre><code class="lang-css hljs">&lt;<span class="hljs-selector-tag">i</span> <span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">iconfont</span> <span class="hljs-selector-tag">icon-xxx</span>"&gt;&lt;/<span class="hljs-selector-tag">i</span>&gt;</code></pre>
        <blockquote>
        <p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
        </blockquote>
    </div>
</body>
</html>
